/**
 * Created by thomas on 2017/5/2.
 */
import React,{Component} from 'react';
import ajax from './ajax';
import {withRouter} from 'react-router-dom';
// BrowserRouter.push("/fff")
class Sandwiches extends React.Component{
    constructor(props) {
        super(props);
        this.state= {
            username:sessionStorage.getItem("username"),
            userimg:sessionStorage.getItem("user_imga"),
            img_path:sessionStorage.getItem("img_path"),
            mess: JSON.parse(sessionStorage.getItem("mess")),
            line1 : {
                width:"1%",
                WebkitTransition: 'all', // note the capital 'W' here
                msTransition: 'all' // 'ms' is the only lowercase vendor prefix
            },
            line2 :{
                width:"1%",
                WebkitTransition: 'all', // note the capital 'W' here
                msTransition: 'all' // 'ms
            },
            line3 :{
                width:"1%",
                WebkitTransition: 'all', // note the capital 'W' here
                msTransition: 'all' // 'ms
            },
            bmi_w:'',
            bf:"",
            cout:1,
            hid_load:true,
            height:"",
            scroe_c:"#dd311f"
        };
        //this.context.router.transitionTo('/foo')
        this.junp= this.junp.bind(this);
        this.goback=this.goback.bind(this);
    }
    line_move(...mess){
        let cout_fin =  this.state.mess[mess[1]];
        if(mess[0] == 'line2'){
            cout_fin = cout_fin*2.3;
        }else if(mess[0] == "line3"){
            cout_fin = cout_fin*2.3;
        }
        let count=1;
        requestAnimationFrame(
            add_c
        )
        let _this = this;
        let add_c_c = cout_fin / 10;//speed
        let i = 1;
        function add_c(){
            add_c_c=cout_fin / 10 + (i-=0.2);
            add_c_c <= 0?add_c_c = 1:1;
            let xx = _this.state[mess[0]];
            xx.width = (count += add_c_c) +"%";
            _this.setState({
                [mess[0]]:xx
            });
            if(count < cout_fin && count <=100){
                requestAnimationFrame(add_c)
            }
        }
    }

    set_s(){
        let bmi = this.state.mess.bmi;
        let bf =this.state.mess.bodyfat;

        if(bmi < 18.5){
            this.setState({
                bmi_w:"偏轻"
            })
        }else if(bmi>18.5 && bmi < 24){
            this.setState({
                bmi_w:"健康"
            })
        }else if(bmi > 24 && bmi< 28 ){
            this.setState({
                bmi_w:"超重"
            })
        }else if(bmi > 28 ){
            this.setState({
                bmi_w: "肥胖"
            })
        }
        //bf
        if(bf <= 21){
            this.setState({
                bf:"廋"
            })
        }else if(bf >=21 && bf <=26){
            this.setState({
                bf:"偏瘦"
            })
        }else if(bf > 26 && bf <= 31){
            this.setState({
                bf:"标准"
            })
        }else if(bf > 31 && bf <= 36){
            this.setState({
                bf:"微胖"
            })
        }else if(bf >36){
            this.setState({
                bf:"肥胖"
            })
        }
    }
    scroll_fun(){

    }
    goback(){
        this.props.history.push("/tacos")
    }
    componentWillMount(){
        if(this.state.mess.scroe<60){
            this.setState({
                scroe_c:"#dd311f"
            })
        }else if(this.state.mess.scroe > 60 && this.state.mess.scroe < 80){
            this.setState({
                scroe_c:"#e77a10"
            })
        }else if(this.state.mess.scroe <100 && this.state.mess.scroe > 81){
            this.setState({
                scroe_c:"#0acc13"
            })
        }
        document.getElementsByTagName("title")[0].innerText="健康管家";
        // this.set_s();
    }
    componentDidMount(){
        this.line_move('line1',"scroe");
        setTimeout(()=>{
            this.line_move('line2',"bmi");
        },0)
        setTimeout(()=>{
            this.line_move("line3","bodyfat");
        },0)

        this.set_s();
        // this.refs.load.style.height="2000px"
    }
    junp(e){
        /* obj.meth :post
        * obj:url url
        * obj,data data
        * obj.cb cb
        */
        //man 1 fe 0
        this.setState({
            hid_load:false
        });
        let sex  =  sessionStorage.getItem("sex");
        sex == "man" ? sex = 1:sex =0;
        let openid = document.getElementById("user_opid").getAttribute("data-id");
        sessionStorage.setItem("op_id",openid);
        openid=openid.replace(/\s/g,"");
        ajax({
            meth:"post",
            url:"http://woxiaoshitang.com/activity/health.php/Index/writeOffWeight",
            data:"sex="+sex+"&openid="+openid,
            cb: (data)=> {
                    sessionStorage.setItem("record_mess",data.toString());
                    data = JSON.parse(data);
                    sessionStorage.setItem("userid",data.userid);
                    this.props.history.push(e);
            }
        })
    }
    render() {

        return (
            <div className="result_contain">
                <div className="reult_header">
                    <div className="header_i">
                        <img src={this.state.userimg} alt="" className="header_img_limit"/>
                    </div>
                    <div className="header_name">
                        {this.state.username}
                    </div>
                </div>
                <div className="result_bottom">
                     {/*top*/}
                     <div className="top_result_list">
                         <div className="inner_top_result_list">
                             <div className="wrap_top_result_list_top">
                                 <div className="top_result_list_top">
                                     吃得怎么样？
                                 </div>
                                 <div className="top_result_list_top_icon">

                                 </div>
                             </div>

                             <div className="top_result_list_top_count">
                                 你的得分为：<span className="get_count_num">
                                  <span style={{color:this.state.scroe_c}}>
                                      {this.state.mess.scroe}
                                  </span>
                                 分</span>
                             </div>
                             <div className="line_bottom">
                                 <div className="line_top" ref="line_top" style={this.state.line1}></div>
                             </div>
                             <div className="wrap_b_g">
                                 <div className="bad">
                                     <span className="bad_icon">&nbsp;</span>
                                     <span>Bad</span>
                                 </div>
                                 <div className="good">
                                     <span className="good_icon">&nbsp;</span>
                                     <span>Good</span>
                                 </div>
                             </div>
                             <div className="check_eat" onClick={() =>this.junp("/record")}>看看我最近吃了啥</div>
                         </div>
                     </div>
                    {/*top*/}
                    {/*mid*/}
                    <div className="mdi_result_list">
                      <div className="mid_header">
                          <div className="zhi">BMI值</div>
                          <div className="mid_num_result">{this.state.mess.bmi.toFixed(1)}<span className="mid_tab_result">({this.state.bmi_w})</span></div>
                          <div className="result_edit" onClick={this.goback}>重新修改</div>
                      </div>
                      <div className="result_mid_mid">
                           <div>
                               偏轻
                           </div>
                          <div>
                             健康
                          </div>
                          <div>
                              超重
                          </div>
                          <div>
                              肥胖
                          </div>
                      </div>
                      <div className="result_mid_line">
                          <div className="lab_18">
                              <div className="lab_18_show">&nbsp;</div>
                              <div className="lab_18_name">18.5</div>
                          </div>
                          <div className="lab_18 c_p_2">
                              <div className="lab_18_show">&nbsp;</div>
                              <div className="lab_18_name">24</div>
                          </div>
                          <div className="lab_18 c_p_3">
                              <div className="lab_18_show">&nbsp;</div>
                              <div className="lab_18_name">28</div>
                          </div>
                            <div className="result_mid_line_out" style={this.state.line2}></div>
                      </div>
                    </div>
                    {/*mid*/}
                    {/*bottom*/}
                    <div className="mdi_result_list cancel_border">
                        <div className="mid_header">
                            <div className="zhi">体脂率</div>
                            <div className="mid_num_result">{this.state.mess.bodyfat}%<span className="mid_tab_result c_bt_w">({this.state.bf})</span></div>
                            <div className="result_edit" onClick={this.goback}>重新修改</div>
                        </div>
                        <div className="result_bottom_list">
                            <div>
                                瘦
                            </div>
                            <div>
                                偏瘦
                            </div>
                            <div>
                                标准
                            </div>
                            <div>
                                微胖
                            </div>
                            <div> 肥胖</div>
                        </div>
                        <div className="result_mid_line c_bot_c">
                            <div className="lab_18 c_bot_p_1">
                                <div className="lab_18_show c_bot_c_ss">&nbsp;</div>
                                <div className="lab_18_name">21</div>
                            </div>
                            <div className="lab_18 c_p_2 c_bot_p_2">
                                <div className="lab_18_show c_bot_c_ss">&nbsp;</div>
                                <div className="lab_18_name">26</div>
                            </div>
                            <div className="lab_18 c_p_3 c_bot_p_3">
                                <div className="lab_18_show c_bot_c_ss">&nbsp;</div>
                                <div className="lab_18_name">31</div>
                            </div>
                            <div className="lab_18 c_p_3 c_bot_p_4">
                                <div className="lab_18_show c_bot_c_ss">&nbsp;</div>
                                <div className="lab_18_name">36</div>
                            </div>
                            <div className="result_mid_line_out c_bot_c_out" style={this.state.line3}></div>
                        </div>
                    </div>
                    {/*bottom*/}
                </div>
            </div>
        );
    }
}
export default withRouter(Sandwiches);
